import React from 'react';
// import ReactDOM from 'react-dom';
import { connect } from 'dva';
import { NavBar, Toast, Icon } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import { WithContext as ReactTags } from '../components/tags/ReactTags';
import RemoveComponent from '../components/tags/removeTag';

class selectSpecial extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: [{ id: 1, text: 'Thailand' }, { id: 2, text: 'India' }],
      suggestions: ['Banana', 'Apple', 'Apricot', 'Pear', 'Peach'],
    };
    this.handleDelete = this.handleDelete.bind(this);
    this.handleAddition = this.handleAddition.bind(this);
    this.handleDrag = this.handleDrag.bind(this);
  }

  handleDelete(i) {
    const tags = this.state.tags;
    tags.splice(i, 1);
    this.setState({ tags });
  }

  handleAddition(tag) {
    if (tag.length < 2) {
      Toast.info('最少输入两个字', 2);
      return false;
    }
    const tags = this.state.tags;
    if (tags.length >= 10) {
      Toast.info('最多只能输入10个擅长', 2);
      return false;
    }
    if (tags.length <= 9) {
      tags.push({
        id: tags.length + 1,
        text: tag,
      });
    } else {
      return false;
    }
    this.setState({ tags });
  }

  handleDrag(tag, currPos, newPos) {
    const tags = this.state.tags;

        // mutate array
    tags.splice(currPos, 1);
    tags.splice(newPos, 0, tag);

        // re-render
    this.setState({ tags });
  }
  handleOk() {
    // console.log(this.state.tags);
    let string = '';
    this.state.tags.map((item) => {
      string += `${item.text},`;
      return string;
    });
    const arr = string.slice(0, -1).split(',');

    this.props.dispatch({
      type: 'physicianAuth/selectSpecialSuccess',
      payload: {
        specialization: arr,
      },
    });
    this.props.dispatch(routerRedux.push('/physicianAuth'));
  }

  render() {
    const { tags, suggestions } = this.state;
    return (
      <div style={{ backgroundColor: '#ffffff', height: `${window.innerHeight}px` }}>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          leftContent="返回"
          onLeftClick={() => {
            this.props.dispatch(routerRedux.push('/physicianAuth'));
          }}
          rightContent={[
            <span onClick={this.handleOk.bind(this)}>完成</span>,
          ]}
        >擅长疾病</NavBar>
        <div style={{ width: '100%', height: '20px', backgroundColor: '#f5f5f9' }} />
        <ReactTags
          tags={tags}
          suggestions={suggestions}
          handleDelete={this.handleDelete}
          handleAddition={this.handleAddition}
          handleDrag={this.handleDrag}
          placeholder="请输入您擅长的疾病(2-12个字)"
          maxLength="12"
          removeComponent={RemoveComponent}
        />

      </div>
    );
  }
}
function mapStateToProps({ physicianAuth }) {
  return { physicianAuth };
}


export default connect(mapStateToProps)(selectSpecial);
